<template>
  <div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            placeholder="通过项目名称查询,记得回车哦..."
            clearable
            @change="keywordsChange"
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            @keyup.enter.native="search"
            prefix-icon="el-icon-search"
            v-model="keywords">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-plus" @click="showAddItem">添加消费项</el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div style="margin-top: 10px">
          <el-table
            :data="items"
            v-loading="tableLoading"
            border
            stripe
            size="mini"
          >
            <el-table-column
              prop="itemId"
              width="200"
              align="left"
              label="项目编号">
            </el-table-column>
            <el-table-column
              width="85"
              align="left"
              label="项目类型">
              <template slot-scope="scope">
                <span >{{ scope.row.itemType == '1'?'服务类型':'药品类型' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="itemName"
              width="85"
              align="left"
              label="项目名称">
            </el-table-column>
            <el-table-column
              width="150"
              align="left"
              label="金额">
              <template slot-scope="scope">
                <span>{{(scope.row.itemMoney / 100).toFixed(2) }} 元</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              width="220"
              align="left"
              label="更新时间">
            </el-table-column>
            <el-table-column
              label="操作"
              width="195">
              <template slot-scope="scope">
                <el-button @click="showEditItemView(scope.row)" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini">
                  编辑
                </el-button>
                <el-button type="danger" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini"@click="deleteItem(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;margin: 2px">
            <el-pagination
              background
              :page-size="10"
              :current-page="currentPage"
              @current-change="currentChange"
              layout="prev, pager, next"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
        <el-dialog :title="title" :visible.sync="formVisible" @close="close">
          <el-form :model="item" :rules="rules" ref="itemManageForm">
            <el-form-item prop="itemType" label="类型" :label-width="formLabelWidth">
              <el-select v-model="item.itemType" placeholder="请选择">
                <el-option
                  v-for="option in options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="itemName" label="名称" :label-width="formLabelWidth">
              <el-input v-model="item.itemName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="itemMoney" label="金额" :label-width="formLabelWidth">
              <el-input v-model="item.itemMoney" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="storeId" label="门店" :label-width="formLabelWidth">
              <el-select v-model="item.storeId" placeholder="请选择">
                <el-option
                  v-for="store in stores"
                  :key="store.value"
                  :label="store.label"
                  :value="store.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveItem">确 定</el-button>
            <el-button @click="close">取 消</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formVisible: false,
        title: '添加消费项',
        keywords: '',
        items: [],
        formLabelWidth: '120px',
        totalCount: -1,
        currentPage: 1,
        tableLoading: false,
        options: [
          {
            label: '服务类型',
            value: '1'
          },
          {
            label: '药品类型',
            value: '2'
          }
        ],
        stores: [],
        item: {
          itemType: '1',
          itemName: '',
          itemMoney: '',
          storeId: '',
          status: '1'
        },
        emptyItem: {
          itemType: '1',
          itemName: '',
          itemMoney: '',
          storeId: '',
          status: '1'
        },
        rules: {
          itemName: [{required: true, message: '必填:名称', trigger: 'blur'}],
          itemType: [{required: true, message: '必选:项目类型', trigger: 'change'}],
          itemMoney: [
            {required: true, message: '必填:价格', trigger: 'blur'},
            {pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message:'必须为金额类型(保留两位小数)'}
          ],
          storeId: [{required: true, message: '必选:门店', trigger: 'change'}]
        }
      }
    },
    mounted: function () {
      this.search();
      this.stores = this.$store.state.stores.map(item => {
        let result = {};
        result.value=item.storeId;
        result.label=item.storeName
        return result;
      })
    },
    methods: {
      search() {
        let _this = this;
        this.tableLoading = true;
        //this.getRequest("/userInfo/user/list?pageNum=" + this.currentPage + "&pageSize=10&keywords=" + this.keywords ).then(resp=> {
        this.postJsonRequest("/consume/query/list?pageNum=" + this.currentPage + '&pageSize=10', {itemName: this.keywords}).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            if (resp.data) {
              let data = resp.data;
              _this.items = data.result;
              _this.totalCount = data.total;
            } else {
              _this.items = [];
              _this.totalCount = 0;
            }
//            _this.emptyMemberData();
          }
        }).catch((e) => {
          console.log(e)
        })
      },
      keywordsChange() {
        if (this.keywords != '') {
          this.search();
        }
      },
      showAddItem() {
        this.title = "添加消费项"
        this.item = this.emptyItem
        this.formVisible = true
      },
      currentChange(currentChange){
        this.currentPage = currentChange;
        this.search();
      },
      showEditItemView(row) {
        this.title = "修改消费项"
        this.item = row
        this.item.itemMoney = (parseFloat(this.item.itemMoney) / 100).toFixed(2)
        this.formVisible = true
      },
      deleteItem(row) {
        let _this = this
        this.$confirm('此操作将删除这条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/consume/delete/'+ row.itemId).then(resp => {
            if (resp && resp.status == 200) {
              console.log(resp.data)
              _this.search();
            }
          })
        })
      },
      saveItem() {
        let _this = this;
        if (this.item.itemId) {
          this.$refs['itemManageForm'].validate((valid) => {
            if (valid) {
              let temp = Object.assign({},this.item)
              temp.itemMoney = Math.ceil(parseFloat(temp.itemMoney) * 100)
              this.postJsonRequest('/consume/update', temp).then(resp=> {
                if (resp && resp.status == 200) {
                  _this.formVisible = false
                  _this.search();
                }
              })
            }
          })
        } else {
          this.$refs['itemManageForm'].validate((valid) => {
            if (valid) {
              let temp = Object.assign({},this.item)
              temp.itemMoney = Math.ceil(parseFloat(temp.itemMoney) * 100)
              this.postJsonRequest('/consume/add', temp).then(resp=> {
                if (resp && resp.status == 200) {
                  _this.formVisible = false
                  _this.search();
                }
              })
            }
          })
        }
      },
      resetForm() {
        this.$refs['itemManageForm'].resetFields();
      },
      close() {
        this.formVisible = false;
        this.resetForm();
        this.search()
      }
    }
  }
</script>
<style>
  .el-form-item__content {
    text-align: left;
  }
</style>
